<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/static/layui/css/layui.css" media="all" rel="stylesheet">
    <link href="/static/crm/lib/layui-v2.6.3/css/layui.css" media="all" rel="stylesheet">
    <link href="/static/crm/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet">
    <link href="/static/crm/css/public.css" media="all" rel="stylesheet">
    <style>

    </style>

</head>

<body>
<div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
        <li class="layui-this">合同审批</li>
        <li>回款审批</li>
        <li>发票审批</li>
    </ul>

    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <table id="demo" lay-filter="test1"></table>
        </div>
        <div class="layui-tab-item">
            <table id="demo2" lay-filter="test2"></table>
        </div>
        <div class="layui-tab-item">
            <table id="demo3" lay-filter="test3"></table>
        </div>
    </div>

</div>
<!--编辑删除添加按钮-->
<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" lay-event="del">取消</button>
        <button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" lay-event="audit">审核</button>
    </div>
</script>


<!--点击刷新按钮-->
<script id="shuax" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-icon layui-icon-refresh-3 layui-btn layui-btn-sm"></button>
    </div>
    <div>

        <form action="#" method="post" class="layui-form">
            <input type="text" placeholder="搜索" autocomplete="off" style="width: 200px;">
        </form>

    </div>
</script>
<script id="fapiao" type="text/html">
    <div class="layui-btn-container">
        <a class=" layui-btn layui-btn-normal layui-btn layui-btn-xs" lay-event="add">新增发票</a>
    </div>
</script>
<script charset="utf-8" src="/static/crm/lib/layui-v2.6.3/layui.js"></script>
<script charset="utf-8" src="/static/crm/js/lay-config.js?v=1.0.4"></script>
<script src="/static/layui/layui.js"></script>
<script>
    layui.use(['form', 'table', 'layer', 'jquery'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer;

        //定义顶端新增数据监听
        table.on('toolbar(test3)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            if (obj.event === 'add') {
                layer.open({
                    type: 2,
                    area: ['1000px', '500px'],
                    content: 'add'
                })
            }
        })

        //第一个实例
        table.render({
            elem: '#demo'
            , toolbar: '#shuax'
            , url: '/crm/backlog.backlog/one' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'number', title: '合同编号', width: 120}
                , {field: 'name', title: '合同名称', width: 120}
                , {field: 'client_id', title: '客户名称', width: 120}
                , {field: 'money', title: '合同金额', width: 120}
                , {field: 'remark', title: '备注', width: 90}
                , {field: 'start_time', title: '开始时间', width: 120}
                , {field: 'end_time', title: '结束时间', width: 120}
                , {field: 'sale_id', title: '签约人', width: 100}
                , {field: 'create_time', title: '创建时间', width: 120}
                , {field: 'status', title: '状态', width: 80}
                , {title: '操作', width: 200, toolbar: '#toolbarDemo', fixed: 'right'}
            ]]
        });

        //工具条事件
        table.on('tool(test1)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') { //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    , title: 'xxx'
                });
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });
        //第一个实例审核键
        // table.on('tool(test1)', function (obj) {
        //     console.log(obj);
        //     if (obj.event === 'audit') {
        //         console.log('进入审核')
        //         layer.open({
        //             type: 2,
        //             area: ['500px', '600px'],
        //             content: '/crm/backlog.audit/dit'
        //         })
        //     } else if (obj.event === 'del') {
        //         //第一个实例取消键
        //         console.log('进入取消');
        //         layer.confirm('确定取消要合同名称为' + obj.data.name + '的合同', function (index) {
        //             console.log(111)
        //             //向服务端发送删除指令
        //             $.ajax({
        //                 type: 'POST',
        //                 url: 'del',
        //                 data: 'id=' + obj.data.id,
        //                 dataType: 'json',
        //                 success: function (result) {
        //                     if (result === '删除成功') {
        //                         layer.msg(result);
        //                         //删除对应行（tr）的DOM结构，并更新缓存
        //                         obj.del();
        //                         layer.close(index);
        //                         table.reload('table')
        //                     } else {
        //                         layer.msg(result);
        //                         return false;
        //                     }
        //                 },
        //                 error: function () {
        //                     layer.msg('操作失败！！！');
        //                 }
        //             })
        //         })
        //     }

        // })
        //第二个示例
        table.render({
            elem: '#demo2'
            , height: 250
            , toolbar: '#shuax'
            , url: 'two' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'number', title: '回款编号', width: 120}
                , {field: 'money', title: '回款金额', width: 120}
                , {field: '', title: '合同编号', width: 120}
                , {field: '', title: '合同名称', width: 120}
                , {field: 'client_id', title: '客户名称', width: 120}
                , {field: '', title: '合同金额', width: 120}
                , {field: 'remark', title: '备注', width: 80}
                , {field: '', title: '签约人', width: 80}
                , {field: 'create_time', title: '创建时间', width: 120}
                , {field: 'wealth', title: '状态', width: 80}
                , {title: '操作', width: 200, toolbar: '#toolbarDemo', fixed: 'right'}
            ]]
        });
        //第二个实例删除按钮
        table.on('tool(test2)', function (obj) {
            if (obj.event === 'audit') {
                console.log(obj)
                layer.open({
                    type: 2,
                    area: ['500px', '600px'],
                    content: ''
                })

            } else if (obj.event === 'del') {
                layer.confirm('确定取消要回款编号为' + obj.data.number + '的的记录吗', function (index) {
                    //向服务端发送删除指令
                    $.ajax({
                        type: 'POST',
                        url: 'del2',
                        data: 'id=' + obj.data.id,
                        dataType: 'json',
                        success: function (result) {
                            if (result === '删除成功') {
                                layer.msg(result);
                                //删除对应行（tr）的DOM结构，并更新缓存
                                obj.del();
                                layer.close(index);
                                table.reload('table')
                            } else {
                                layer.msg(result);
                                return false;
                            }
                        },
                        error: function () {
                            layer.msg('操作失败！！！');
                        }
                    })
                })
            }

        })
        //第三个示例
        table.render({
            elem: '#demo3'
            , height: 250
            , toolbar: '#fapiao'
            , url: 'table' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'money', title: '发票金额', width: 100}
                , {field: 'subject', title: '开票主体', width: 100}
                , {field: 'title', title: '发票抬头类型', width: 100}
                , {field: 'type', title: '发票类型', width: 100}
                , {field: 'code', title: '统一社会信用代码', width: 150}
                , {field: 'email', title: '接收邮箱', width: 100}
                , {field: 'person', title: '收件人', width: 100}
                , {field: 'phone', title: '收件手机', width: 100}
                , {field: 'address', title: '邮寄地址', width: 100}
                , {field: 'remark', title: '备注', width: 80}
                , {field: 'create_time', title: '创建时间', width: 100}
                , {field: 'update_time', title: '创建时间', width: 100}
                , {field: 'status', title: '审核状态', width: 100}
                , {title: '操作', width: 100, toolbar: '#toolbarDemo', fixed: 'right'}
            ]]
        });

        //第三个实例删除按钮
        table.on('tool(test3)', function (obj) {
            layer.confirm('确定取消要发票id为' + obj.data.id + '的的记录吗', function (index) {
                //向服务端发送删除指令
                $.ajax({
                    type: 'POST',
                    url: 'del3',
                    data: 'id=' + obj.data.id,
                    dataType: 'json',
                    success: function (result) {
                        if (result === '删除成功') {
                            layer.msg(result);
                            //删除对应行（tr）的DOM结构，并更新缓存
                            obj.del();
                            layer.close(index);
                            table.reload('table')
                        } else {
                            layer.msg(result);
                            return false;
                        }
                    },
                    error: function () {
                        layer.msg('操作失败！！！');
                    }
                })
            })
        })

    });
</script>

</body>

</html>